<template>
  <el-dialog
    v-model="visible"
    v-if="load"
    title="统计详情"
    width="1200"
    :close-on-click-modal="false"
    @close="close"
    :z-index="2000"
  >
    <el-table ref="tableRef" :data="tableData" border fit>
      <el-table-column label="任务单号" prop="task_no" width="140"></el-table-column>
      <el-table-column label="SKU" width="120">
        <template #default="{ row }">
          {{
            (row.images_assignment_sku?.length &&
              row.images_assignment_sku.map((j) => j.sku).join("、")) ||
            "--"
          }}
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="status_text" width="120"></el-table-column>
      <el-table-column label="任务等级" prop="task_no" width="90">
        <template #default="{ row }">
          {{ row.task_priority_text }}
        </template>
      </el-table-column>
      <el-table-column label="任务/产品类型" prop="task_type_text_export" width="120">
        <template #default="{ row }">
          <div>{{ row.task_type_text_export }}</div>
          <div>{{ row.product_type_text }}</div>
        </template>
      </el-table-column>
      <el-table-column label="目标/激励套数" prop="task_no" width="120">
        <template #default="{ row }">
          <div>目标: {{ row.converted_quantity }}</div>
          <div>激励套数:{{ row.incentive_number }}</div>
        </template>
      </el-table-column>
      <el-table-column label="绩效" prop="task_score" width="120"></el-table-column>
      <el-table-column label="处理人员" prop="designer_user_text" width="180">
        <template #default="{ row }">
          <div v-if="row.designer_user_text">
            图片处理人员：{{ row.designer_user_text }}
          </div>
          <div v-if="row.edit_user_text">编辑人员：{{ row.edit_user_text }}</div>
          <div v-if="row.photography_user_text">
            摄影人员：{{ row.photography_user_text }}
          </div>
          <div v-if="row.render_user_text">渲染人员：{{ row.render_user_text }}</div>
          <div v-if="row.assistance_user_text">
            协助人员：{{ row.assistance_user_text }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="create_time" width="160"></el-table-column>
      <el-table-column
        label="提交审核时间"
        prop="process_time"
        width="160"
      ></el-table-column>
      <el-table-column
        label="设计审核时间"
        prop="designer_time"
        width="160"
      ></el-table-column>
      <el-table-column label="部门分配周期" prop="assignment_time" width="160">
        <template #default="{ row }">
          <div>{{ row.assignment_time_start }} - {{ row.assignment_time_end }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="预期完成时间"
        prop="expected_time"
        width="160"
      ></el-table-column>
      <el-table-column
        label="任务领取时间"
        prop="claim_time"
        width="160"
      ></el-table-column>
      <el-table-column label="交付天数" width="180">
        <template #header>
          <div>交付天数</div>
          <div>(提交审核-任务领取)</div>
        </template>
        <template #default="{ row }">
          <div>{{ calculateDay(row.process_time, row.claim_time) }}</div>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex justify-end py-2">
      <el-pagination
        v-model:current-page="page.pageNum"
        v-model:page-size="page.pageSize"
        :total="page.totalResult"
        @size-change="getDetail"
        @current-change="getDetail"
        layout="prev, pager,number, next, total,"
      />
    </div>
    <template #footer>
      <el-button @click="close">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted, toRaw } from "vue";
import { getDetailList } from "../api/index.js";

const data = reactive({
  visible: false,
  tableData: [],
  page: {
    pageNum: 1,
    pageSize: 5,
    totalResult: 0,
  },
  form: null,
  load: false,
});

const { visible, tableData, page, form, load } = toRefs(data);

const open = async (query) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  form.value = query;
  getDetail(form);
  visible.value = true;
};

const close = () => {
  visible.value = false;
};

const getDetail = async () => {
  try {
    const res = await getDetailList({ ...form.value, ...page.value });
    tableData.value = res.data;
    page.value.totalResult = res.total;
  } catch (e) {
    throw Error(e);
  }
};

// 计算天数
const calculateDay = (processTime, createTime) => {
  if (!processTime || !createTime) return "--";
  const processTimeDate = new Date(processTime);
  const createTimeDate = new Date(createTime);
  const diff = processTimeDate - createTimeDate;
  const day = diff / (1000 * 60 * 60 * 24);
  return day.toFixed(6);
};

defineExpose({ open });
</script>
<style lang="scss"></style>
